<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>单机版视频呼叫</title>
    <style>
      .video_container {
        width: 800px;
        margin: 100px auto 0;
      }
			#local_video,
			#remote_video {
				width: 200px;
			}
    </style>
  </head>
  <body>
    <div class="video_container">
      <video id="local_video"></video>
      <video id="remote_video"></video>
			<hr />
			<div class="button_container">
				<button id="callButton">呼叫</button>
				<button id="hangupButton">挂断</button>
			</div>
    </div>

    <script>
			window.onload = function() {
        let localVideo = document.getElementById("local_video")
        let remoteVideo = document.getElementById("remote_video")
        let callButton = document.getElementById("callButton")
				let hangupButton = document.getElementById("hangupButton")
				let pc1,pc2

				localVideo.addEventListener("loadedmetadata", () => {
          localVideo.play()
        })

				remoteVideo.addEventListener("loadedmetadata", () => {
          remoteVideo.play()
        })


        let localStream = null

        callButton.addEventListener("click", async e => {
        	if (localStream) return console.log('连接中。。。');
        	localStream = await getUserMedia()
					localVideo.srcObject = localStream

					callAction()

        })

        hangupButton.addEventListener("click", e => {
					localStream.getTracks().forEach(t => t.stop())
					localStream = null
					pc1.close()
					pc2.close()
        })

        // 获取被动媒体
        async function getUserMedia() {
        	return await navigator.mediaDevices
        		.getUserMedia({ video: {facingMode:  "user" }, audio: true })
        		.catch(e => {
							console.log(e)
							alert(e)
        		})
        }

        async function callAction() {

        	pc1 = new RTCPeerConnection()
        	pc2 = new RTCPeerConnection()

        	// 监测候选者加入
        	pc1.addEventListener('icecandidate', function (event) {
							let iceCandidate = event.candidate;

							// 实际这里会发送给信令服务穿法给pc2
        			if (iceCandidate) {
        				pc2.addIceCandidate(iceCandidate);
        			}
        	});
        	localStream.getTracks().forEach(track => pc1.addTrack(track, localStream));

        	// 监测媒体流传入
        	pc2.addEventListener('addstream', function (event) {
        		remoteVideo.srcObject = event.stream;
        	})

					//创建
        	let offer = await pc1.createOffer({OfferToReceiveAudio: true, OfferToReceiveVideo: true})
					pc1.setLocalDescription(offer);



					/*
						实际这里应该是将offer发送到信令服务器
					*/

					pc2.setRemoteDescription(offer)
					let description = await pc2.createAnswer()

					pc2.setLocalDescription(description)


					pc1.setRemoteDescription(description)

			  }

		}
    </script>
  </body>
</html>
